<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	//项目的发布路径，例如:  /shxt
	String path = request.getContextPath();
	/*
	全路径，形式如下: http://127.0.0.1:8888/shxt/
	request.getScheme()      ——> http 获取协议
	request.getServerName()  --> 127.0.0.1 获取服务名
	request.getServerPort()  --> 8888 获取端口号
	path                     --> /shxt 获取访问的路径 路
	*/
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>Document</title>
    <script>
        function init(){
            document.getElementById("btn_cookieShow").addEventListener("click",()=>{
                let node = document.getElementsByClassName("cookieSelect")[0];
                if (node.hidden==true) {
                    node.hidden = false;
                    document.getElementById("btn_cookieShow").classList.add("change");
                }else{
                    node.hidden = true;
                    document.getElementById("btn_cookieShow").classList.remove("change");
                }
            },false)
        }
        window.addEventListener("load",init,false);
    </script>
    <style>
    input[type='text'],input[type='password']{
        margin-top: 20px;
        height: 20px;
    }
    input[type='checkbox'] {
        margin-top: 10px;
        margin-left: 0px;
    }
    button {
    	position:absolute;
        margin-top: 40px;
        height: 25px;
    }

    .login_article {
        border: 1px solid #ccc;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        width: 500px;
        height: 180px;
        margin: auto;
        border-radius: 5px;
    }

    .login_article_image {
        float: left;
        margin: 20px;
    }

    #btn_login {
        margin-left: 196px;
    }
	
	#btn_register {
        margin-left: 140px;
    }

    .errorMsg {
        margin-top: 10px;
    }
    .login_img{
    width: 110px;
    height: 110px;
    }
    .img_logo{
        width: 50px;
        height: 60px;
        float: right;
        background-image: url(img/flag.jpg);
        background-position: -270px -140px;
        margin-top: -1px;
        margin-right: 2px;
    }
    #btn_cookieShow{
        background-image: url(img/small_icons.jpg);
        width: 30px;
        height: 30px;
        float: right;
        margin-right: 5px;
        margin-top: 8px;
        background-position: -90px -290px;
    }
    .cookieSelect{
    	position:absolute;
        margin-top: 5px;
    }
    .change{
        transform: rotate(90deg);
    }
    legend{
        width: 250px; 
    }
    fieldset{
        width: 250px; 
        border: 0px;
    }
    form{
        margin-top: -64px;
    }
    
    </style>
</head>

<body>
    <article class="login_article">
        <aside class="img_logo"></aside>

        <aside class="login_article_image">
            <img class="login_img" src="img/5.jpg" alt="login">
            <div class="errorMsg">用户名或密码错误！</div>
        </aside>

        <section>
            <fieldset>
                <legend hidden>用户登录</legend>
                <form action="LoginServlet.do" method="post">
                    用户名：
                    <input type="text" name="userName">
                    <br> 密&nbsp;&nbsp;&nbsp;码：
                    <input type="password" name="password">
                    <br>
                    <div id="btn_cookieShow"></div>
                    <div hidden class="cookieSelect">
                        <input type="checkbox" name="isCookie" value="yes">一周之内不需要登录
                    </div>
					<button id="btn_register" type="submit" formaction="UserServlet.do?param=register" formmethod="post">注册</button>                    
                    <button id="btn_login">登陆</button>
                </form>
                
            </fieldset>
        </section>
    </article>
</body>

</html>